import Layout from '@/layout';

import type {RouteObject } from 'react-router-dom';
import App from '@/App.tsx'
import PropsTs from '@/views/propsTs'
import ChildrenEvent from '@/views/childrenEvent'
import StyleCcomponent from '@/views/styleCcomponent'
import UseFun from '@/views/useFun'
import ReudxTs from '@/views/reduxTs'
//第一中方式
declare module 'react-router' {
    interface IndexRouteObject{
        meta?:{
            title:string,
            icon:string
        }
    }
    interface NonIndexRouteObject{
        meta?:{
            title:string,
            icon:string
        }
    }
}
// 第二种方式
interface Mate{
    meta?:{
        title:string,
        icon:string
    }
}

type Routers= RouteObject & Mate & {
    children?:Routers[]
}


export const routes:Routers[] = [
    {
        path: '/',
        element: <Layout/>,
        children: [
            {
                path: '',
                element: <App/>
            },
        ]
    },
    {
        path: '/propsTs',
        element: <Layout/>,
        children: [
            {
                path: '',
                element: <PropsTs/>,
                meta:{title:'PropsTs',icon:'el-icon-s-tools'}
            },
        ]
    },
    {
        path: '/childrenEvent',
        element: <Layout/>,
        children: [
            {
                path: '',
                element: <ChildrenEvent/>,
                children:[
                    {
                        path: 'children',
                        element: <div>8787511232</div>,
                        meta:{title:'PropsTs',icon:'el-icon-s-tools'}
                    },
                ]
            },
        ]
    },
    {
        path: '/styleCcomponent',
        element: <Layout/>,
        children: [
            {
                path: '',
                element: <StyleCcomponent/>
            },
        ]
    },
    {
        path: '/useFun',
        element: <Layout/>,
        children: [
            {
                path: '',
                element: <UseFun/>
            },
        ]
    },
    {
        path: '/reduxTs',
        element: <Layout/>,
        children: [
            {
                path: '',
                element: <ReudxTs/>
            },
        ]
    },
]
